import React from "react"
import './index.scss'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import {RightOutlined} from '@ant-design/icons'
import {userSourceSetting} from "../../http/api"
import storage from '../../utils/storage'
export default class User extends React.Component{
        constructor (props) {
                super (props);
                const storageKey = ['identitytType','identityStatus','memberId','vipCardType','icon','vipEndTime','phone','vipFlag']
                let state = {}
                storageKey.forEach(item=>{
                        state[item] = storage.get(item)
                })
                this.state = {
                        isLogin:!!state.phone,
                        ...state
                }

        }

        render () {
                const {identityStatus,identitytType,phone,vipCardType,vipEndTime,vipFlag,isLogin} = this.state

                const approveTagRender = {
                        '-1':<span className="tag error">审核失败</span>,
                        '0':<span className="tag">待审核</span>,
                        '1':<span className="tag success">已认证</span>
                }[identityStatus]
                const userSourceRender = !isLogin?
                        <div className="user-name">立即登录 <RightOutlined className='icon'/></div>:
                        <div className='account-container'>
                                <div className='phone'>{`${phone?.substr(0,3)}****${phone?.substr(7,4)}`}{approveTagRender}</div>
                                <div className='role'>{['','个人','企业'][identitytType]||'未认证'}</div>
                        </div>
                return <ContentView title='个人中心'>
                        <ScrollContent>
                                <div className='user-page'>
                                        <div className="account">
                                                <div className="avatar-wrapper"/>
                                                {userSourceRender}
                                        </div>
                                        <div className="vip-card-wrapper">
                                                <div className="text-wrapper">
                                                        <div className="title">粮食商行·VIP</div>
                                                        {parseInt(vipFlag)?<div className="text">{vipCardType} {vipEndTime}到期</div>:<div className="text">开通会员 生意尽在掌握</div>}
                                                </div>
                                                {parseInt(vipFlag)?<div className="btn disabled">已开通</div>:<div className="btn">未开通</div>}
                                        </div>
                                        <div className="list-cell-wrapper">
                                                <div className="cell-item">我的发布 <RightOutlined className='icon'/></div>
                                                <div className="cell-item">我的订单 <RightOutlined className='icon'/></div>
                                                <div className="cell-item">我的关注 <RightOutlined className='icon'/></div>
                                                <div className="cell-item">邀请用户 <RightOutlined className='icon'/></div>
                                                <div className="cell-item">意见反馈 <RightOutlined className='icon'/></div>
                                                <div className="cell-item">关注我们 <RightOutlined className='icon'/></div>
                                                <div className="cell-item">退出关注 <RightOutlined className='icon'/></div>
                                        </div>
                                </div>
                        </ScrollContent>
                </ContentView>
        }

}
